<template>
  <div class="mysearch_container">
      <myHead></myHead>
      <div class="login_container">
        <div class="nav">
          <span>首页</span>
          >
          <span>北京租房</span>
        </div>
        <div class="search">
          <input type="text">
          <span>|</span>
          <div class="sear"></div>
        </div>
        <div class="house">
          <div class="house_title">
            <span>区域</span>
            <span>月租</span>
            <span>房型</span>
            <span>更多</span>
          </div>
          <div class="house_contain">
            <ul>
              <li><a href="javascript:;">
                  <div class="pic">
                    <img src="../assets/image/index/img1.jpg" alt="">
                  </div>
                  <div class="txt">
                    <h5>文化部中间层 一层带猫窝</h5>
                    <div class="info">
                      <p>2室1厅96m²南北</p>
                      <span>1105万</span>
                    </div>
                    <div class="address">
                      <p>红庙北里</p>
                      <span>14268元/平</span>
                    </div>
                    <div class="tag">
                      <span>学区房</span>
                      <span>独家</span>
                    </div>
                  </div>
                </a></li>
              <li><a href="javascript:;">
                  <div class="pic">
                    <img src="../assets/image/index/img2.png" alt="">
                  </div>
                  <div class="txt">
                    <h5>光大水墨 精装复式两层公寓</h5>
                    <div class="info">
                      <p>2室1厅96m²南北</p>
                      <span>280万</span>
                    </div>
                    <div class="address">
                      <p>光大水墨 </p>
                      <span>14268元/平</span>
                    </div>
                    <div class="tag">
                      <span>学区房</span>
                      <span>独家</span>
                    </div>
                  </div>
                </a></li>
              <li><a href="javascript:;">
                  <div class="pic">
                    <img src="../assets/image/index/img3.png" alt="">
                  </div>
                  <div class="txt">
                    <h5>南北通透两居室 精装修带厨房</h5>
                    <div class="info">
                      <p>2室1厅96m²南北</p>
                      <span>320万</span>
                    </div>
                    <div class="address">
                      <p>北京新天地</p>
                      <span>14268元/平</span>
                    </div>
                    <div class="tag">
                      <span>地铁房</span>
                      <span>独家</span>
                    </div>
                  </div>
                </a></li>
              <li><a href="javascript:;">
                  <div class="pic">
                    <img src="../assets/image/index/img3.png" alt="">
                  </div>
                  <div class="txt">
                    <h5>南北通透两居室 精装修带厨房</h5>
                    <div class="info">
                      <p>2室1厅96m²南北</p>
                      <span>320万</span>
                    </div>
                    <div class="address">
                      <p>北京新天地</p>
                      <span>14268元/平</span>
                    </div>
                    <div class="tag">
                      <span>地铁房</span>
                      <span>独家</span>
                    </div>
                  </div>
                </a></li>
            </ul>
          </div>
        </div>

      </div>
      <myFooter></myFooter>
  </div>
</template>

<script>
import myHead from '@/components/myHead.vue'
import myFooter from '@/components/myFooter.vue'
export default {
  components: {
    myHead,
    myFooter
  }
}
</script>

<style lang="less" scoped>
@color: #ff8a00;
@color1: #2f3130;
@vw: 3.20vw;
html {
      background-color: rgb(245, 245, 245);
    }
.mysearch_container{
    .login_container {

      // padding-bottom: (155/@vw);
      .nav {
        background-color: #fff;
        height: (37/@vw);
        font-size: (12/@vw);
        padding-left: (16/@vw);
        border-bottom: 1px solid rgb(197, 197, 197);

        span {
          line-height: (37/@vw);

          &:first-child {
            font-weight: 700;
          }
        }
      }

      .search {
        padding: (10/@vw) (15/@vw);
        position: relative;

        input {
          width: 100%;
          height: (40/@vw);
          border-radius: (5/@vw);
          outline: none;
          border: 1px solid rgb(204, 204, 204);
        }

        span {
          position: absolute;
          right: (60/@vw);
          top: 50%;
          transform: translateY(-50%);
        }

        .sear {
          position: absolute;
          right: (25/@vw);
          top: 50%;
          transform: translateY(-50%);
          width: (18/@vw);
          height: (18/@vw);
          background-image: url(../assets/image/SecondHandList/search_03.png);
          background-size: contain;
          background-repeat: no-repeat;
        }
      }

      .house {
        .house_title {
          height: (40/@vw);
          background-color: #fff;
          border-top: 1px solid rgb(204, 204, 204);
          border-bottom: 1px solid rgb(204, 204, 204);
          display: flex;
          justify-content: space-around;
          align-items: center;

          span {
            font-weight: 700;
            font-size: (16/@vw);
            color: rgb(102, 102, 102);
          }
        }

        .house_contain {
          background-color: #fff;

          ul {
            li {
              height: (142/@vw);
              padding: 0px (20/@vw);

              a {
                width: inherit;
                height: inherit;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid red;

                .pic {
                  width: (81/@vw);
                  height: (81/@vw);
                }

                .txt {
                  width: (186/@vw);

                  h5 {
                    font-size: (16/@vw);
                    // 文字溢出用省略号显示
                    text-overflow: ellipsis;
                    // 溢出隐藏
                    overflow: hidden;
                    // 文字在一行显示，不能换行
                    white-space: nowrap;
                    margin-bottom: (5/@vw);
                  }

                  .info {
                    display: flex;
                    justify-content: space-between;
                    font-size: (12/@vw);
                    margin-bottom: (8/@vw);

                    p {
                      color: black;
                    }

                    span {
                      color: rgb(255, 138, 0);
                    }
                  }

                  .address {
                    display: flex;
                    justify-content: space-between;
                    font-size: (12/@vw);
                    color: rgb(153, 166, 196);
                    margin-bottom: (5/@vw);
                  }

                  .tag {
                    span {
                      display: inline-block;
                      width: (42/@vw);
                      height: (20/@vw);
                      background-color: rgb(244, 247, 249);
                      text-align: center;
                      line-height: (20/@vw);
                      font-size: (12/@vw);
                      color: rgb(153, 166, 196);
                    }
                  }
                }
              }
            }

            :last-child {
              a {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
}
</style>
